<template>
  <div class="user-setting"> 
    <div class="option">选择<span class="blueCor">你想推广</span>的商品品类，<span class="blueCor">精准</span>好货<span class="blueCor">优先</span>为你显示</div>
    <div class="user-site">
      <div class="spread">
        <p>我想推广</p>
        <input type="text" v-model.trim="cateName" placeholder="请输入品类名称" @keyup.space="addShop(cateName)">
        <div class="toolTip">输入后，按空格键提交新标签</div>
        <div class="input-tooltip" v-show="isShowTooltip">
          <i class="iconfont icontishi"></i>
          请输入内容哦~
        </div>
      </div>
      <div class="select-shop">
        <div class="select-item">
          <div 
            class="select-list"
            v-for="(item,index) in dellist" 
            :key="index"
          >
            <div>{{item.name}}</div>
            <div
              class="del-select"
              @click="delShop(index)"
            >x</div>
          </div>
        </div>
      </div>
    </div>
    <div class="bod"></div>
    <div class="user-site">
      <div class="select-name-item">
        <div class="spread">
          <p>可选品类</p>
        </div>
        <div class="select-shop" v-if="selCategory.length">
          <div class="select-text">你可能选择的品类</div>
          <div class="select-kind">
            <div 
              class="select-list"
              v-for="(item,index) in selCategory"
              :key="index"
              @click="addShop(item.name)"
            >
              <p class="fontSet"><i class="iconfont iconjiahao"></i></p>
              <p>{{item.name}}</p>
            </div>
          </div>
        </div>
        <div class="no-data" v-else>暂无可选商品</div>
      </div>
    </div>
    <div class="bod"></div>
    <div class="user-site">
      <div class="select-name-item">
        <div class="spread">
          <p>兴趣爱好</p>
        </div>
        <div class="select-shop" v-if="hobbyCategorys.length">
          <div class="select-text">你可能感兴趣的</div>
          <div class="select-kind">
            <div 
              class="select-list"
              v-for="(item,index) in hobbyCategorys"
              :key="index"
              @click="addShop(item.name)"
            >
              <p class="fontSet"><i class="iconfont iconjiahao"></i></p>
              <p>{{item.name}} </p>
            </div>
          </div>
        </div>
        <div class="no-data" v-else>暂无可选商品</div>
      </div>
    </div>
    <div class="bod"></div>
    <button class="sendAlter" @click="commitMut">提交修改</button>
  </div>
</template>
<script>
export default {
  async fetch({store}) {
    await store.commit('setUserIndex',1);
  },
  layout: 'internalouts',
  components: {
  },
  data() {
    return {
      selCategory:[],  // 可选商品
      selectedShop:[], //已选商品
      dellist:[], //已选商品名称
      cateName:'',//输入框中添加商品名称
      // cycleAdd:false,
      hobbyCategorys:[], //兴趣爱好
      isShowTooltip:false,
      timer:null
    }
  },
  watch:{
    cateName(){
      if(this.cateName){
        this.isShowTooltip = false;
      }
    }
  },
  methods: {
    addShop(cateName){  //添加到我想推广
      if(!this.cateName){
        this.isShowTooltip = true;
        if(this.isShowTooltip){
         this.timer = setTimeout(()=>{
            this.isShowTooltip = false
         },3000)
        }else{
          clearInterval(this.timer)
          this.timer = null;
        }
      }else{
        this.isShowTooltip = false;
      }
      // this.cycleAdd = true;
      // for (let i = 0; i < this.dellist.length; i++) {
      //   let item = this.dellist[i];
      //   if(item.name == cateName){ //有重复的变为false
      //     this.cycleAdd = false;
      //   }
      // }
      // if(this.cycleAdd){ //为true 的时候我们在push
      //   this.dellist.push({ 
      //     name:cateName,
      //   }) 
      // }
      for(let i=0;i<this.dellist.length;i++){ //数组去重
        if(this.dellist[i].name === cateName) return
      }
      this.dellist.push({name:cateName});
      this.cateName = ""; //输完清空表单
    },
 
    delShop(index){ //删除
      this.dellist.splice(index,1)
    },
    commitMut(){ // 点击提交修改
      this.preferSetting() //提交修改
    },
    preferList(){ //商品分类列表
      this.$axios.$post('preferList').then(res => {
        if(res.status === 200 ){
          for(let i in res.obj){
            this.dellist.push({
              name:res.obj[i].cateName,
            })
          }
        }else{
          this.$message.warning(res.msg)
        }
      })
        .catch(error => {
          this.$message.warning('请求失败')
        })
    },
    goodsCateList(){ //商品分类标题
      this.$axios.$post('goodsCateList').then(res => {
        if(res.status === 200 ){
          this.selCategory = res.obj;
        }else{
          this.$message.warning(res.msg);
        }
      })
      .catch(error => {
        this.$message.warning('请求失败')
      }) 
    },
    preferSetting(){ //提交修改
      const name = this.dellist.map(item => item.name)
      let params ={
        names:name.join(','),//拿到商品名称,以逗号分隔传过去
      }
      this.$axios.$post('preferSetting',params).then(res => {
        if(res.status === 200 ){
          this.$message.success(res.msg)
          this.go('/pickGoodsHall/selectedShop') //请求成功后。跳转页面
        }else{
          this.$message.warning(res.msg)
        }
      })
      .catch(error => {
        this.$message.warning('请求失败')
      })
    },
    platCate(){ //连麦涨粉-初始化(平台，类型数据) 兴趣爱好
      this.loading = true;
			let params ={
			}
			this.$axios.$post('raiseFansInit',params).then(res => {
        this.loading = false;
        if(res.status === 200 ){
          // for(let i in res.obj.anchorTypeList){
          //   let obj = res.obj.anchorTypeList[i];
          //   obj.flag = false;
          //   this.hobbyCategorys.push(obj)
          // }
          this.hobbyCategorys = res.obj.anchorTypeList; //兴趣爱好
        }else{
          if(this.test){
            this.test.close()
          }
          this.test = this.$message.warning(res.msg)
        }
			})
      .catch(error => {
        this.$message.warning('请求失败');
        this.loading = false;
      })
		}
  },
  created(){
  },
  mounted(){
    this.goodsCateList() //商品分类列表
    this.platCate() //兴趣爱好
    this.preferList() //偏好商品列表
  },
}
</script>

<style scoped>
  .ii-wrap {
    display: flex;
    justify-content: space-between;
    min-width:1200px;
  }
  .ii-wrap-left {
    background: #fff;
    width: 220px;
    border-radius: 4px;
  }
  .li-wrap-right {
    flex:1;
    margin: 20px;
    min-width:940px;
  }
  .ii-wrap-left-one {
    height: 50px;
    border-bottom: 1px solid #f4f4f4;
    line-height: 50px;
    padding-left: 30px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    position: relative;
    user-select: none;
  }
  .ii-wrap-left-item {
    border-bottom: 1px solid #f4f4f4;
    padding-bottom: 20px;
    user-select: none;
  }
  .ii-wrap-left-item p {
    cursor: pointer;
  }
  .ii-wrap-left-item .p1 {
    font-size: 14px;
    color: #333;
    position: relative;
    height: 50px;
    line-height: 50px;
    padding-left: 30px;
  }
  .ii-wrap-left-item .p2 {
    font-size: 14px;
    color: #666;
    padding-left: 30px;
  }
 .ii-wrap-left-item .p3 {
   margin-top: 20px;
  }
  .ii-wrap-left-last {
    height: 50px;
    line-height: 50px;
    padding-left: 30px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    position: relative;
  }
  .ii-line::before {
    content: '';
    width: 3px;
    height: 26px;
    background: #0096e6;
    position: absolute;
    left: 0;
    top: 12px;
  }
  .ii-text {
    color: #0096e6 !important;
  }
/* 设置 */
  .user-setting{
    width:100%;
    padding:80px 0 80px 0px; 
    background: #fff; 
  }
  .user-site{
    margin: 34px 0 0 128px;
  }
  .bod{
    border: 1px solid #f4f4f4;
  }
  .user-setting .option{
    width:100%;
    text-align:center;
    font-size: 28px;
    font-weight:bold;
    padding-bottom:80px;
    letter-spacing: 2px;
  }
  span.blueCor{
    color:#40b0ec;
  }
  .spread{
    width:720px;
    display:flex;
    justify-content: space-between;
    align-items: center;
    position:relative;
  }
  .spread>input[type="text"]:focus{
    border:1px solid #0096e6;
  }
  .toolTip{
    font-size:18px;
    color:#666666;
  }
  .input-tooltip{
    width: 130px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: #303133;
    box-shadow: 2px 2px 7px #666666;
    border-radius: 4px;
    box-sizing: border-box;
    color: #ffffff;
    position: absolute;
    top: -52px;
    left: 26%;
    z-index: 1003;
    transition:all .3s ease;
  }
  .input-tooltip i{
    color: #E6A23C;
    font-size: 20px;
    vertical-align: middle;
  }
  .input-tooltip::before{
    content: '';
    width: 0;
    height: 0;
    border-width: 10px;
    border-style: solid;
    border-color: #303133 transparent transparent;
    position: absolute;
    left: 18px;
    top: 38px;
  }
  .spread>p{
    font-size: 20px;
    color:#333333;
    font-weight:bold;
    white-space:nowrap;
  }
  .spread>input[type="text"]{
    width: 300px;
    height: 36px;
    text-indent:12px;
    border: 1px solid #e2e2e2;
    box-sizing: border-box;
    border-radius:4px;
  }
  .spread>input::-webkit-input-placeholder{
		color:#C0C4CC;
	}
	.spread>input::-moz-input-placeholder{
		color:#C0C4CC;
	}
	.spread>input:-ms-input-placeholder{
		color:#C0C4CC;
	}
  .select-shop{
    padding:34px 0;
    display:flex;
  }
  .fontSet{
    color:#FFC915;
    width:16px;
    height:16px;
    padding-right:5px;
  }
  .select-text {
    white-space: nowrap;
    letter-spacing: 1px;
    width:130px;
    height:27px;
    line-height: 27px;
  }
  .select-item,.select-kind{
    display:flex;
    flex-wrap:wrap;
    width:90%;
  }
  .select-list {
    display:flex;
  }
  .select-item .select-list,.select-kind .select-list{
    padding:7px 18px 7px 12px;
    height:27px;
    line-height: 12px;
    text-align: center;
    position: relative;
    border:1px solid #F4F4F4;
    /* border:1px solid #0096E6; */
    color:#ffffff;
    margin:0 17px 15px 0;
    border-radius:4px;
    background:#F4F4F4;
    /* background:#0096E6; */
    color:#333333;
    cursor: pointer;
    box-sizing: border-box;
    user-select: none;
    overflow: hidden;
  }
  .select-item .select-list:hover .del-select,.select-item .select-list:hover{
    border:1px solid #0096E6;
    background:#0096E6;
    color:#ffffff;
  }
  .select-kind .select-list:hover{
    border:1px solid #0096E6;
    background:#0096E6;
    color:#ffffff;
  }
  .select-list>.del-select{
    line-height: 8px;
    text-align: center;
    position: absolute;
    top: 7px;
    right: 5px;
    color: #999999;
    border-radius: 50%;
    background: #fff;
    font-weight: 545;
    font-family: consals;
    font-size:14px;
  }
  .sendAlter{
    margin:34px 0 0 128px;
    font-size: 14px;
    background-color: #0096e6;
    color:#fff;
    border-radius:15px;
    padding:8px 22px;
    box-sizing: border-box;
    outline: none;
    border: none;
    cursor: pointer;
    user-select:none;
  }
  .sendAlter:hover{
    background:#66B1FF;
  }
  .no-data{
    width:100%;
    height:50px;
    line-height:50px;
    text-align:center;
    color:#0096e6;
    font-size:18px;
    font-weight:400;
    margin:0 auto;
  }
</style>
